<template>
  <div id="medical_records">
    <header>
      <i @click="goBack()"></i>
      <div>患者病历</div>
      <span style="width: 55px"></span>
    </header>
    <div class="nav">
      <div @click='tabToggle(0,sentPage,"click")'>
        <a class="active">
          <b>已签字病历</b>
        </a>
      </div>
      <div @click='tabToggle(1,sentPage,"click")'>
        <a class="">
          <b>未签字病历</b>
        </a>
      </div>
    </div>
    <div class="swipe">
      <div class='mc' v-if="list.length<1">
        <img src="../../../image/no_record@2x.png" width='74' alt="">
        <p>目前还没有任何病历记录!</p>
      </div>
      <Loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
        <ul class="list">
          <li v-for="(item,index) in list" :key='index' @click="chakan(item.id)">
            <!-- <router-link :to='{name:"medical_details",query: {id:item.id,doctorname: doctorname}}'> -->
            <a>
              <ul>
                <li>
                  <span class='bold'>
                    {{item.time}}
                  </span>
                  <span>{{item.pname }}</span>
                  <span>{{item.sex }}</span>
                  <span>{{item.age }}</span>
                </li>

                <li class='noPadding'>
                  <span class='border'>诊断</span>
                  <div>
                    {{item.diagnose}}
                  </div>
                </li>
                <li class='noPadding'>
                  <span class='border'>处置</span>
                  <div>
                    {{item.cure}}
                  </div>
                </li>
              </ul>
            </a>
            <!-- </router-link> -->
          </li>
        </ul>
      </Loadmore>
    </div>
  </div>
</template>
<script>
  import {
    Loadmore
  } from 'mint-ui';
  export default {
    data() {
      return {
        doctorname: '', //医生名字
        pid: '', //患者id
        name: '', //身份
        list: [],
        userid: '',
        sentPage: {
          page: 1,
          rows: "10"
        }, //接口入参
        totalNum: 0, //总数据条数
        allLoaded: false, //分页数据是否已经加载完毕
        status: '', //是某个患者的病历 还是该医生所有病历 病历记录 工作记录 
      }
    },
    components: {
      Loadmore,
    },
    methods: {
      goBack() {
        if (this.name == 'order') {
          this.$router.push({
            name: 'clinicDetail',
            query: {
              id: this.$route.query.clinicid,
              distance: this.$route.query.distance,
            }
          })
        } else {
          this.$router.push({
            name: 'appointmentTime',
            query: {
              user: 'doctor'
            }
          });
        }
      },
      chakan(id) {
        if (this.$route.query.name == 'order') {
          this.$router.push({
            name: 'clinicDetail',
            query: {
              id: this.$route.query.clinicid,
              distance: this.$route.query.distance,
              blid: id,
              doctorname: this.doctorname,
            }
          })
        } else {
          this.$router.push({
            name: 'medical_details',
            query: {
              id: id,
              doctorname: this.doctorname,
              status: 0,
            }
          })
        }
      },
      //新建病例记录
      addMedical_records() {
        this.$router.push({
          name: 'edit_medical',
          query: {
            status: 'add',
            pid: this.pid
          }
        });
      },
      // 登录拦截
      isLogin() {
        this.userid = localStorage.getItem("loginMobile");
        if (!this.userid) {
          this.$router.push('/login1')
          return false;
        } else {
          return true;
        }
      },
      tabToggle(i, params, click) { //0已完成 1未完成
        $('.nav div a').eq(i).addClass('active');
        $('.nav div').eq(i).siblings().find('a').removeClass();
        //每点击一次初始化
        if (click) {
          this.list = [];
          this.sentPage.page = 1;
        }
        if (this.name == '"clinic"') {
          var doctor_id = 'clinic_id'
        } else {
          var doctor_id = 'doctor_id'
        }
        this.userid = localStorage.getItem("loginMobile");
        if (i == 0) {
          this.type = '已完成';
          this.userid = localStorage.getItem("loginMobile");
          this.$api.post(this.$api.baseURLSchool, "selecttype_view/view_patient_medical/0?" + doctor_id + "=" + this.userid +
            "&status=1",
            params, r => {
              this.totalNum = r.data.records; //总数据
              if (this.sentPage.page == 1) {
                this.list = r.data.rows;
              } else {
                this.list = this.list.concat(r.data.rows);
              }
              if (r.data.rows.length == 0 && this.sentPage.page > 1) {
                this.$utils._toast("暂无更多数据");
              }

              if (r.data.ret == -3) {
                localStorage.clear();
                this.isLogin()
              }
            }, err => {
              console.log(err);
            })
        }
        if (i == 1) {
          this.type = '未完成';
          this.list = [];
          this.userid = localStorage.getItem("loginMobile");
          this.$api.post(this.$api.baseURLSchool, "selecttype_view/view_patient_medical/0?" + doctor_id + "=" + this.userid +
            "&status=0",
            params, r => {
              this.totalNum = r.data.records; //总数据
              if (this.sentPage.page == 1) {
                this.list = r.data.rows;
              } else {
                this.list = this.list.concat(r.data.rows);
              }
              if (r.data.rows.length == 0 && this.sentPage.page > 1) {
                this.$utils._toast("暂无更多数据");
              }
              if (r.data.ret == -3) {
                localStorage.clear();
                this.isLogin()
              }

            }, err => {
              console.log(err);
            })
        }
      },
      //获取患者病历列表
      getMedicalList(params) { //0已完成 1未完成   
        this.userid = localStorage.getItem("loginMobile");
        this.name = localStorage.getItem("type"); //当前身份
        if (this.name == '"clinic"') {
          var doctor_id = 'clinic_id'
        } else {
          var doctor_id = 'doctor_id'
        }
        this.$api.post(this.$api.baseURLSchool, "selecttype_view/view_patient_medical/0?" + doctor_id + "=" + this.userid +
          "&status=1",
          params, r => {
            this.totalNum = r.data.records; //总数据
            if (this.sentPage.page == 1) {
              this.list = r.data.rows;
            } else {
              this.list = this.list.concat(r.data.rows);
            }
            if (r.data.rows.length == 0 && this.sentPage.page > 1) {
              this.$utils._toast("暂无更多数据");
            }
            if (this.totalNum == this.list.length) {
              this.allLoaded = true;
            }

          }, err => {
            console.log(err);
          })
      },
      //上拉加载
      loadBottom() {
        (this.sentPage.page) ++;
        setTimeout(() => {
          this.getMedicalList(this.sentPage);
        }, 20);
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      },
      //初始化
      init() {
        this.$api.get(this.$api.baseURLSchool, "selectdata2/user_relative?user_id=" + this.userid +
          "&type_name=user&name=approve&type=approve&img_url=个人基本资料", {}, r => {
            if (r.data.ret == 1) {
              const docData = JSON.parse(r.data.info[0].content);
              this.doctorname = docData.name;
            }
          }, err => {
            console.log(err);
          })
      },

    },
    created() {
      //   this.init();
      this.getMedicalList(this.sentPage);
    },
    mounted() {

    }
  }

</script>
<style lang="scss" scoped>
  .mc {
    padding-top: 115px;

    img {
      display: block;
      margin: 0 auto;
    }

    p {
      padding-top: 10px;
      text-align: center;
      font-size: 17px;
      color: rgba(51, 51, 51, 1);
    }
  }

  .nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 10px;
  }

  .active {
    color: #2eda97;
  }

</style>
